<template>
	<view class="content">
    <concern-banner ref="concern"></concern-banner>
		<view class="tips-box"></view>
		<view class="info-box">
			<view class="info-block">
				<view class="tips-content">易朴奇门遁甲</view>
				<view class="section info-tips">
					<view>时家奇门排盘</view>
				</view>
				<view class="section">
					<view class="section-title plural-section">起局时间：</view>
          <view>
            <view class="section-content">
              <lunar-picker ref="lunarPicker" :date.sync="date"></lunar-picker>
            </view>
            <view class="section-content">
              <view @click="onSolarClick" class="select-item-box">
                <view>真太阳时</view>
                <image class="select-item"
                  :src="isSolarTime==false?'../../static/images/bazi/rect2.png':'../../static/images/bazi/rect1.png'">
                </image>
              </view>
            </view>
          </view>
				</view>
				<view class="section" v-if="isSolarTime===true">
					<view class="section-title">地区：</view>
          <view class="section-content">
          	<area-picker ref="areaPicker" v-model="area" placeholder="请选择出生地区"></area-picker>
          </view>
				</view>
				<view class="section">
					<view :class="['section-title',panType==1?'plural-section':'']">
						<view class="plural-title">盘式：</view>
					</view>
					<view>
						<view class="section-content">
							<view @click="onDisc0Click" class="select-item-box">
								<view>转盘</view>
								<image class="select-item"
									:src="panType==0?'../../static/images/bazi/cir1.png':'../../static/images/bazi/cir2.png'">
								</image>
							</view>
							<view @click="onDisc1Click" class="select-item-box">
								<view>飞盘</view>
								<image class="select-item"
									:src="panType==0?'../../static/images/bazi/cir2.png':'../../static/images/bazi/cir1.png'">
								</image>
							</view>
						</view>
						<view class="section-content" v-if="panType==1">
							<view @click="onFly0Click" class="select-item-box">
								<view>阳顺阴逆</view>
								<image class="select-item"
									:src="flyType==0?'../../static/images/bazi/rect1.png':'../../static/images/bazi/rect2.png'">
								</image>
							</view>
							<view @click="onFly1Click" class="select-item-box">
								<view>阴阳皆顺</view>
								<image class="select-item"
									:src="flyType==0?'../../static/images/bazi/rect2.png':'../../static/images/bazi/rect1.png'">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="section">
					<view class="section-title">局式：</view>
					<view>
						<view class="section-content">
							<view @click="onSetClick" data-id="0" class="select-item-box-set">
								<view>拆补</view>
								<image class="select-item"
									:src="setType=='0'?'../../static/images/bazi/cir1.png':'../../static/images/bazi/cir2.png'">
								</image>
							</view>
							<view @click="onSetClick" data-id="1" class="select-item-box-set">
								<view>置闰</view>
								<image class="select-item"
									:src="setType=='1'?'../../static/images/bazi/cir1.png':'../../static/images/bazi/cir2.png'">
								</image>
							</view>
							<view @click="onSetClick" data-id="2" class="select-item-box-set">
								<view>茅山</view>
								<image class="select-item"
									:src="setType=='2'?'../../static/images/bazi/cir1.png':'../../static/images/bazi/cir2.png'">
								</image>
							</view>
							<view @click="onSetClick" data-id="3" class="select-item-box-set">
								<view>手工</view>
								<image class="select-item"
									:src="setType=='3'?'../../static/images/bazi/cir1.png':'../../static/images/bazi/cir2.png'">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="section" style="margin-bottom: 0;" v-if="setType==='3'">
					<view class="section-title">选局：</view>
					<view @click="chooseSet" class="section-content">
						<view class="input_text">{{setArr[setValue]}}</view>
					</view>
				</view>
				<!-- 更多 -->
				<view class="more-section">
					<view @click="moreOpen" class="more-item" v-if="isMore===false">
						更多
						<image class="more-item-image" src="../../static/images/qimen/down.png"></image>
					</view>
					<view @click="moreClose" class="more-item" v-else>
						收起
						<image class="more-item-image" src="../../static/images/qimen/up.png"></image>
					</view>
				</view>
				<!-- 更多选项 -->
				<view class="section-more-item" v-if="isMore===true" @click="chooseXunkong">
					<view>标记旬空：</view>
					<view>
						<view class="input_text lunar-item">{{xunkongArr[xunkongValue]}}</view>
					</view>
				</view>
				<view class="section-more-item" style="margin-bottom: 48rpx;" v-if="isMore===true&&panType==0"
					@click="chooseJigong">
					<view>当前寄宫：</view>
					<view>
						<view class="input_text lunar-item">{{jigongArr[jigongValue]}}</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="section">
					<view @click="queryNewTime" class="section-btn">
						<view class="btn-text">起局</view>
					</view>
				</view>
			</view>
		</view>
		<activity-box :positionId="402"></activity-box>
    <yipu-logo></yipu-logo>
		<!-- 选局选择弹出框 -->
		<view :class="['picker-view',showSetPickerView?'show':'']">
			<view class="picker-inner">
				<view class="pick_header">
					<view class="pick-item">当前选局</view>
				</view>
				<view class="time">
					<picker-view @change="bindSetChange" indicatorStyle="height:80rpx;" style="height: 100%"
						:value="setValue">
						<picker-view-column>
							<view v-for="(item, index) in setArr" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="btns">
					<view @click="confirmSelectSet" class="confirm">确认</view>
				</view>
			</view>
		</view>
		<!-- 旬空选择弹出框 -->
		<view :class="['picker-view',showXunkongPickerView?'show':'']">
			<view class="picker-inner">
				<view class="pick_header">
					<view class="pick-item">标记旬空</view>
				</view>
				<view class="time">
					<picker-view @change="bindXunkongChange" indicatorStyle="height:80rpx;" style="height: 100%"
						:value="xunkongValue">
						<picker-view-column>
							<view v-for="(item, index) in xunkongArr" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="btns">
					<view @click="confirmSelectXunkong" class="confirm">确认</view>
				</view>
			</view>
		</view>
		<!-- 寄宫选择弹出框 -->
		<view :class="['picker-view',showJigongPickerView?'show':'']">
			<view class="picker-inner">
				<view class="pick_header">
					<view class="pick-item">标记旬空</view>
				</view>
				<view class="time">
					<picker-view @change="bindJigongChange" indicatorStyle="height:80rpx;" style="height: 100%"
						:value="jigongValue">
						<picker-view-column>
							<view v-for="(item, index) in jigongArr" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="btns">
					<view @click="confirmSelectJigong" class="confirm">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 工具方法
	let utils = require("./js/util");
  
  import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				isLunar: false,
				isSolarTime: false,
				panType: 0,
				flyType: 0,
				setType: 0,
				setArr: ["阳1局", "阳2局", "阳3局", "阳4局", "阳5局", "阳6局", "阳7局", "阳8局", "阳9局", "阴1局", "阴2局", "阴3局", "阴4局", "阴5局",
					"阴6局", "阴7局", "阴8局", "阴9局"
				],
				isMore: false,
				xunkongArr: ["时空", "日空", "月空", "年空"],
				jigongArr: ["寄坤宫", "阳艮阴坤", "寄四维", "随节令"],
        date: "",
        area: "",
				setValue: [0],
				showSetPickerView: false,
				xunkongValue: [0],
				showXunkongPickerView: false,
				jigongValue: [0],
				showJigongPickerView: false
			}
		},
    computed: {
      ...mapGetters({
        isConcern: 'user/isConcern'
      })
    },
		methods: {
			// 真太阳时
			onSolarClick: function() {
				this.isSolarTime = !this.isSolarTime
        if (this.isSolarTime == false) this.area = "";
			},
			// 盘式
			onDisc0Click: function() {
				this.panType = 0
			},
			onDisc1Click: function() {
				this.panType = 1
			},
			onFly0Click: function() {
				this.flyType = 0
			},
			onFly1Click: function() {
				this.flyType = 1
			},
			// 选择局式
			onSetClick: function(e) {
				this.setType = e.currentTarget.dataset.id
			},
			chooseSet: function() {
				this.showSetPickerView = true
			},
			bindSetChange: function(a) {
				let value = a.detail.value;
				this.setValue = [value[0]]
			},
			confirmSelectSet: function() {
				this.showSetPickerView = false
			},
			// 更多
			moreOpen: function() {
				this.isMore = true
			},
			moreClose: function() {
				this.isMore = false
			},
			// 选择旬空
			chooseXunkong: function() {
				this.showXunkongPickerView = true
			},
			bindXunkongChange: function(a) {
				let value = a.detail.value;
				this.xunkongValue = [value[0]]
			},
			confirmSelectXunkong: function() {
				this.showXunkongPickerView = false
			},
			// 选择寄宫
			chooseJigong: function() {
				this.showJigongPickerView = true
			},
			bindJigongChange: function(a) {
				let value = a.detail.value;
				this.jigongValue = [value[0]]
			},
			confirmSelectJigong: function() {
				this.showJigongPickerView = false
			},
			// 起局
			queryNewTime() {
        if (this.isConcern == true) {
          this.targetPage();
        }else{
          this.$refs.concern.concernPopup()
        }
			},
			// 跳转目标页面
			targetPage: function() {
        // 规则校验
        let validate = this.validData();
        if (!validate ) return false;
        
        let dateResult = this.$refs.lunarPicker.getSolarTime();
        let date = dateResult.date;
        let time = dateResult.hour +":"+ dateResult.minute;
        
				var e = date + "T" + time; // 时间
				var t = this.panType; // 盘式
				var n = this.flyType; // 选择顺逆
				if (t == 1 && n == 1) { // 飞盘&&阴阳皆顺
					t = 2
				};
				var i = this.setType; // 局式
				var r = Number(this.setValue[0]); // 当前选局
				var s = r < 9 ? r + 1 : -1 * (r % 9 + 1);
				var l = this.xunkongValue[0]; // 标记旬空
				var o = this.jigongValue[0]; // 中宫寄宫 
				// var u = a.detail.value.remember;  // 是否记住
				var h = this.isSolarTime; // 是否真太阳时
				// var m = this.params.ext.geo;  // ??
				var params = {
					dateStr: e,
					panType: t,
					juType: i,
					selectJu: s,
					emptyType: l,
					attachType: o,
					// remember: u,
					isRealTime: h,
          area: this.area,
					ext: {
						emptyType: l,
						attachType: o,
						geo: null
					}
				};
				if (h) params.ext.geo = {
					longitude: this.lng
				}
				var url = "/pages/qimen/zhuanpan/zhuanpan?";
				if (params.panType != 0) {
					url = "/pages/qimen/feipan/feipan?";
				}
				uni.navigateTo({
					url: url + utils.objToQueryStr(params)
				});
			},
      // 数据验证
      validData() {
      	if (this.date.length < 5) {
      		uni.showToast({
      			title: '请选择出生日期',
      			icon: 'none'
      		});
      		return false
      	}
      	if (this.isSolarTime == true && (this.area == '' || this.area == null || this.area == undefined)) {
      		uni.showToast({
      			title: '请选择出生地区',
      			icon: 'none'
      		});
      		return false
      	}
      	return true
      }
		}
	}
</script>
<style>
	.content {
		height: 100%;
		width: 100%;
		overflow-y: scroll;
		position: relative
	}

	.tips-box {
		height: 400rpx;
		background-color: #c6a680;
		width: 100%;
	}

	.tips-content {
		color: #c5a57e;
		height: 65rpx;
		width: 100%;
		margin-top: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.info-tips {
		margin: 58rpx 0;
	}

	.info-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: -230rpx;
	}

	.info-block {
		background-color: #fff;
		width: 640rpx;
		height: fit-content;
		border-radius: 0rpx;
		box-shadow: 0 0 20rpx #666;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 48rpx;
	}

	.section {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}

	.section-title {
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
    white-space: nowrap;
    width: 160rpx;
	}

	.section-content {
		width: 422rpx;
		height: 88rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.plural-section {
		align-self: flex-start;
		display: flex;
		flex-direction: column;
		height: 88rpx;
		justify-content: center;
	}

	.plural-title {
		height: 50%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.lunar-item {
		/* font-size: 26rpx; */
		color: #808080;
	}

	.section-time {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.arrow-icon {
		height: 28rpx;
		width: 28rpx;
		padding-top: 4rpx;
		padding-right: 8rpx;
	}

	.more-section {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		width: 80%;
		margin-bottom: 16rpx;
	}

	.more-item {
		display: flex;
		align-items: center;
		color: #000;
		font-weight: bolder;
		font-size: 30rpx;
	}

	.more-item-image {
		height: 26rpx;
		width: 26rpx;
	}

	.select-item-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-right: 40rpx;
	}

	.select-item-box-set {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		padding-right: 10rpx;
	}

	.item30 {
		width: 30%;
	}

	.item40 {
		width: 40%;
	}

	.item50 {
		width: 50%;
	}

	.select-item {
		height: 38rpx;
		width: 38rpx;
	}

	.section-more-item {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 521rpx;
		height: 78rpx;
		
		border: solid 3rpx #c5a680;
		font-size: 32rpx;
		line-height: 70rpx;
		margin-bottom: 11rpx;
	}

	.section-btn {
		width: 521rpx;
		height: 78rpx;
		
		font-size: 32rpx;
		color: #fff;
		background-color: #c6a680;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 32rpx 0 48rpx;
	}

	.btn-text {
		font-size: 32rpx;
		white-space: nowrap;
	}

	.picker-view {
		background-color: rgba(0, 0, 0, .6);
		height: 100%;
		overflow: hidden;
		position: fixed;
		top: 0;
		visibility: hidden;
		width: 100%;
		max-width: 750px;
		z-index: 1000;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}

	.picker-view.show {
		visibility: visible;
	}

	.picker-view .picker-inner {
		background-color: #fff;
		border-radius: 8rpx;
		bottom: 0;
		display: block;
		font-size: 30rpx;
		margin-left: 2%;
		position: fixed;
		text-align: center;
		width: 96%;
	}

	.picker-view .picker-inner .time {
		display: block;
		height: 400rpx;
		padding: 20rpx;
		position: relative;
		color: #000;
	}

	.picker-view .picker-inner .time.show {
		display: block;
	}

	.picker-view .picker-inner .time .hm-span {
		position: absolute;
		right: 50%;
		top: 197rpx;
	}

	.picker-view .picker-inner .type {
		border-top: 1rpx solid #eee;
		height: 80rpx;
	}

	.picker-view .picker-inner .btns {
		height: 80rpx;
		line-height: 80rpx;
		overflow: hidden;
		padding-bottom: 2vw;
	}

	.picker-view .picker-inner .btns .confirm {
		width: 409rpx;
		height: 71rpx;
		color: #fff;
		background-color: #c6a680;
		margin: 0 auto;
		border-radius: 12rpx;
		font-size: 43rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.pick_header {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		border-bottom: 2rpx solid #c6a680;
		height: 95rpx;
		width: 100%;
	}

	.pick-item {
		color: #c6a680;
		height: 100%;
		padding-top: 36rpx;
		box-sizing: border-box;
		font-size: 36rpx;
		font-weight: bolder;
	}

	.pick-active {
		border-bottom: 14rpx solid #c6a680;
	}
</style>
